<template>
    <div class="sys-tenant-container flex flex-col">
        <a-card class="mb-2.5">
            <common-form
                :model="state.queryForm"
                name="menu-form"
                @query="handleQuery"
                @add="handleAdd"
                @reset="handleReset"
                :btnShow="{
                    add:false
                }"
            >
                <a-form-item
                    label="租户名称"
                    name="name"
                    class="w-1/2.5"
                >
                    <a-input v-model:value="state.queryForm.name"/>
                </a-form-item>
                <a-form-item
                    label="联系电话"
                    name="phone"
                    class="w-1/2.5"
                >
                    <a-input v-model:value="state.queryForm.phone"/>
                </a-form-item>
            </common-form>
        </a-card>
        <a-card class="flex-1 card-table">
            <common-table 
                :columns="columns" 
                :data="state.tableData"
                :pagination="{
                        total: state.tableParams.total,
                        current: state.tableParams.page,
                        pageSize: state.tableParams.pageSize,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        pageSizeOptions:['2','5','10','20'],
                        showTotal:(total:number) => `总数: ${total}`
                }"
                :loading="state.loading"
                @change="changePagination"
            >
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'logo'">
                        <a-avatar :src="computedAvatarUrl(record.logo)" shape="square" size="small">
                            <template #icon><UserOutlined /></template>
                        </a-avatar>
                    </template>
                    <template  v-if="column.dataIndex === 'enableReg'">
                        <a-tag color="green" v-if="column.dataIndex == 1">启用</a-tag>
                        <a-tag color="orange" v-else>禁用</a-tag>
                    </template>
                    <template v-if="column.dataIndex === 'tenantType'">
                        <template v-for="i in useMapDictList('TenantTypeEnum')" :key="i">
                            <a-tag color="green" v-if="i.value == '0' && record.tenantType == 0">{{ i.label }}</a-tag>
                            <a-tag color="orange" v-else-if="i.value=='1'&& record.tenantType == 1">{{ i.label }}</a-tag>
                        </template>
                    </template>
                    <template v-if="column.dataIndex === 'dbType'">
                        <a-tag v-if="record.dbType === 0">MySql</a-tag>
                        <a-tag v-else-if="record.dbType === 1">SqlServer</a-tag>
                        <a-tag v-else-if="record.dbType === 2">Sqlite</a-tag>
                        <a-tag v-else-if="record.dbType === 3">Oracle</a-tag>
                        <a-tag v-else-if="record.dbType === 4">PostgreSQL</a-tag>
                        <a-tag v-else-if="record.dbType === 5">Dm</a-tag>
                        <a-tag v-else-if="record.dbType === 6">Kdbndp</a-tag>
                        <a-tag v-else-if="record.dbType === 7">Oscar</a-tag>
                        <a-tag v-else-if="record.dbType === 8">MySqlConnector</a-tag>
                        <a-tag v-else-if="record.dbType === 9">Access</a-tag>
                        <a-tag v-else-if="record.dbType === 10">OpenGauss</a-tag>
                        <a-tag v-else-if="record.dbType === 11">QuestDB</a-tag>
                        <a-tag v-else-if="record.dbType === 12">HG</a-tag>
                        <a-tag v-else-if="record.dbType === 13">ClickHouse</a-tag>
                        <a-tag v-else-if="record.dbType === 14">GBase</a-tag>
                        <a-tag v-else-if="record.dbType === 15">Odbc</a-tag>
                        <a-tag v-else-if="record.dbType === 16">OceanBaseForOracle</a-tag>
                        <a-tag v-else-if="record.dbType === 17">TDengine</a-tag>
                        <a-tag v-else-if="record.dbType === 18">GaussDB</a-tag>
                        <a-tag v-else-if="record.dbType === 19">OceanBase</a-tag>
                        <a-tag v-else-if="record.dbType === 20">Tidb</a-tag>
                        <a-tag v-else-if="record.dbType === 21">Vastbase</a-tag>
                        <a-tag v-else-if="record.dbType === 22">PolarDB</a-tag>
                        <a-tag v-else-if="record.dbType === 23">Doris</a-tag>
                        <a-tag v-else-if="record.dbType === 900">Custom</a-tag>
                    </template>
                    <template v-if="column.dataIndex === 'status'">
                        <a-switch v-model:checked="record.status" :checkedValue="1" />
                    </template>
                    <template v-if="column.dataIndex ==='history'">
                        <div style="cursor: pointer;">
                            <edit-record-history :row="record"/>
                        </div>
                    </template>
                    <template v-if="column.dataIndex === 'operation'">
                        <div class="w-full">
                            <a-button :icon="h(EditOutlined)" ghost type="primary" class="mr-1" @click="handleEdit(record)" >编辑</a-button>
                            <a-popconfirm
                                title="确定删除?"
                                @confirm="handleDelete(record)"
                            >
                                <a-button :icon="h(DeleteOutlined)" danger >删除</a-button>
                            </a-popconfirm>
                        </div>
                    </template>
                </template>
            </common-table>
        </a-card>
        <edit-tenant ref="editTenantRef" @handleQuery="handleQuery"/>
    </div>
</template>

<script setup lang="ts" name="sysTenant">
import CommonForm from '@/components/common-form/index.vue'
import CommonTable from '@/components/common-table/index.vue'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
import { h, onMounted, reactive,ref } from 'vue';
import editRecordHistory from '@/components/self/edit-record-history.vue';
import { apiSysTenantDeletePost, apiSysTenantPagePost } from '@/api/sys/sysTenant';
import type { ResType } from '@/api/types';
import type { TableParamsResType } from '../onlineUser/type';
import type { ItemType } from './types';
import { useMapDictList } from '@/hooks';
import editTenant from './components/editTenant.vue';
import { showMsg } from '@/utils';

defineOptions({
    name:"sysTenant"
})

const editTenantRef = ref<InstanceType <typeof editTenant>>()
const state = reactive({
    queryForm:{
        name:"",
        phone:""
    },
    tableData:[] as any[],
    tableParams: {
		page: 1,
		pageSize: 50,
		total: 0 as any,
	},
    loading:false,
})

const columns:any[] = [
    {
        title: '序号',
        align: "center",
        width: 60,
        customRender: ({ index }:{index:number}) => {
            return `${ index + 1 }`;
        },
        fixed: 'left',
    },
    {
        title: '图标',
        dataIndex: 'logo',
        key: 'logo',
        align: 'center',
        width: 100,
        ellipsis: true
    },
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
        width: 120,
    }, 
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        align: 'center',
        width: 120,
    }, 
    {
        title: '副标题',
        dataIndex: 'viceTitle',
        key: 'viceTitle',
        align: 'center',
        width: 120,
    }, 
    {
        title: '描述',
        dataIndex: 'viceDesc',
        key: 'viceDesc',
        align: 'center',
        width: 250,
        ellipsis: true
    }, 
    {
        title: '水印',
        dataIndex: 'watermark',
        key: 'watermark',
        align: 'center',
        width: 120,
    },
    {
        title: '版权信息',
        dataIndex: 'copyright',
        key: 'copyright',
        align: 'center',
        width: 150,
        ellipsis: true
    },  
    {
        title: '备案号',
        dataIndex: 'icp',
        key: 'icp',
        align: 'center',
        width: 120,
        ellipsis: true
    },  
    {
        title: 'icp地址',
        dataIndex: 'icpUrl',
        key: 'icpUrl',
        align: 'center',
        width: 120,
        ellipsis: true
    },
    {
        title: '启用注册',
        dataIndex: 'enableReg',
        key: 'enableReg',
        align: 'center',
        width: 120,
    },
    {
        title: '租管账号',
        dataIndex: 'adminAccount',
        key: 'adminAccount',
        align: 'center',
        width: 120,
    },
    {
        title: '电话',
        dataIndex: 'phone',
        key: 'phone',
        align: 'center',
        width: 120,
    },
    {
        title: '电话',
        dataIndex: 'phone',
        key: 'phone',
        align: 'center',
        width: 120,
    },
    {
        title: '域名',
        dataIndex: 'host',
        key: 'host',
        align: 'center',
        width: 150,
    }, 
    {
        title: '域名',
        dataIndex: 'host',
        key: 'host',
        align: 'center',
        width: 150,
    }, 
    {
        title: '租户类型',
        dataIndex: 'tenantType',
        key: 'tenantType',
        align: 'center',
        width: 150,
    },
    {
        title: '数据库类型',
        dataIndex: 'dbType',
        key: 'dbType',
        align: 'center',
        width: 150,
    },
    {
        title: '数据库连接',
        dataIndex: 'connection',
        key: 'connection',
        align: 'center',
        width: 250,
        ellipsis: true
    }, 
    {
        title: '从库连接',
        dataIndex: 'slaveConnections',
        key: 'slaveConnections',
        align: 'center',
        width: 150,
    }, 
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        width: 120,
    },
    {
        title: '排序',
        dataIndex: 'orderNo',
        key: 'orderNo',
        align: 'center',
        width: 100,
    },
    {
        title: '修改记录',
        dataIndex: 'history',
        key: 'history',
        align: 'center',
        width: 120,
    },
    // {
    //     title: '操作',
    //     align: 'center',
    //     key:"operation",
    //     dataIndex: 'operation',
    //     width: 250,
    //     fixed: 'right',
    // }
]

const computedAvatarUrl = (url: string) => {
	return import.meta.env.VITE_API_URL + '/' + url	
}

const handleQuery = async ()=>{
    state.loading = true
    const params = Object.assign(state.queryForm,state.tableParams)
    let res = await apiSysTenantPagePost(params) as ResType<TableParamsResType<ItemType>>
    state.tableData = res.data.result.items ?? []
    state.tableParams.total =res.data.result.total ?? 0
    state.loading = false
}
const handleAdd = ()=>{
    editTenantRef.value?.handleOpen({tenantType: 0, orderNo: 100})
}
const handleReset = ()=>{
    
}
const handleEdit = (record:any)=>{
    editTenantRef.value?.handleOpen(record)
}

const handleDelete = async(record:any)=>{
	await apiSysTenantDeletePost({id:record.id})
    showMsg("删除成功",'success')
    await handleQuery()
}
const changePagination = async(pagination:{current:number,pageSize:number})=>{
    state.tableParams.page = pagination.current
    state.tableParams.pageSize = pagination.pageSize
    await handleQuery()
}




onMounted(()=>{
    handleQuery()
})
</script>

<style lang="scss" scoped>
.sys-tenant-container{
    .card-table{
        :deep(.ant-card-body){
            height: 100%;
        }
    }
}
:deep(.ant-table-cell-fix-right){
    // right: 0 !important;
}
:deep(.ant-btn >span) {
    display:inline-flex!important;
}
</style>